<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>tab切换栏</title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			li {
				list-style: none;
			}
			.w {
				width: 1200px;
				margin: 0 auto;
			}
			
			.box {
				height: 50px;
				background-color: #ccc;
			}
			
			.box ul {
				width: 100%;
				height: 100%;
			}
			.box ul li {
				height: 100%;
				line-height: 50px;
				float: left;
				padding: 0 30px;
				cursor: pointer;
			}
			.lighthigh {
				color: #fff;
				background-color: #e1251b;
			}
			.show {
				display: block;
			}
			
			.notshow {
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="box w">
			<ul>
				<li class="lighthigh">商城</li>
				<li>服装城</li>
				<li>品有超市</li>
				<li>全球购</li>
			</ul>
		</div>
		<div class="content w">
			<ul>
				<li class="show">商城</li>
				<li class="notshow">服装城</li>
				<li class="notshow">品有超市</li>
				<li class="notshow">全球购</li>
			</ul>
		</div>
		
		<script type="text/javascript">
			//获取tab切换栏下面的所有li数组
			var tabs = document.querySelectorAll('.box ul li');
			console.log(tabs)
			//遍历这些li，绑定事件,并且去设置它的index属性
			for(var i = 0; i < tabs.length; i++) {
				tabs[i].setAttribute('data-index',i);
				tabs[i].onclick = function() {
					//先使用排他思想将tab中的li的样式清空
					for(var j = 0; j <tabs.length; j++) {
						tabs[j].className = ''
					}
					//再将当前的li的背景设置为红色
					this.className = 'lighthigh';
					
					//记录当前是第几个
					var index = this.getAttribute('data-index');
					
					//再设置下面显示对应的内容
					//获取到内容下面的元素数组
					var cons = document.querySelectorAll('.content ul li');
					console.log(cons)
					//遍历内容数组
					for(var i = 0; i < cons.length; i++) {
						
						//使用排他思想将有的内容中的li的隐藏样式清空
						for(var j = 0; j < cons.length; j++) {
							cons[j].className = 'notshow'
						}
						
						//将当前的内容显示出来
						cons[index].className = 'show'
					}
				}
			}
		</script>
	</body>
</html>
